<template>
  <div class="box">
    <!-- //标题 -->
    <van-nav-bar title="智慧商城" fixed/>
    <!-- //搜索框 -->
    <div class="Search" @click="$router.push('/ferio')">
      <van-search
        shape="round"
        background="#F1F1F3"
        placeholder="请输入搜索关键词"
      />
      <router-view></router-view>
    </div>
    <!-- //轮播图 -->
    <div class="a">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          class="img"
          v-for="item in bananerList"
          :key="item.imgUrl"
          ><img :src="item.imgUrl" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 宫格 -->
    <div>
      <van-grid :column-num="5" icon-size="50px">
        <van-grid-item
          v-for="item in navList"
          :key="item.imgUrl"
          :icon="item.imgUrl"
          :text="item.text"
        />
      </van-grid>
    </div>
    <!-- 主会场 -->
    <div class="img">
      <img src="../../assets/main.png" alt="" />
    </div>
    <!-- 猜你喜欢 -->
    <div class="word">
      <p>--猜你喜欢--</p>
    </div>
    <div>
      <GonxdHxte :item="item" v-for="item in proList" :key="item.goods_id" ></GonxdHxte>
    </div>
  </div>
</template>
<script>
import { getHomeDs } from '@/api/dext'
import GonxdHxte from '@/components/GonxdHxte'
export default {
  name: 'ComIndex1',
  components: {
    GonxdHxte
  },
  data () {
    return {
      bananerList: [], // 轮播
      navList: [], // 宫格
      proList: []
    }
  },
  async created () {
    const {
      data: {
        data: { pageData }
      }
    } = await getHomeDs()
    this.bananerList = pageData.items[1].data
    this.navList = pageData.items[3].data
    this.proList = pageData.items[6].data
    console.log(pageData)
  },
  methods: {
  }
}
</script>

<style lang="less">
.box {
  .word {
    text-align: center;
  }
  .img {
    img {
      width: 100%;
      height: 100%;
    }
  }
  .van-nav-bar__content {
    background-color: #c31401;
    .van-nav-bar__title {
      color: #fff;
    }
  }
  //标题样式
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  //轮盘样式
  .Search{
    margin-top: 45px;
  }
}
</style>
